<template>
  <div style="background-color: #F5F5F5;">
    <el-container style="width: 70%;margin: 0 auto;">

      <!--与el-container对应，否则会排版乱码-->
      <el-header style="height: 0;width: 0"></el-header>
      <!--页头-->
      <Header></Header>


      <!--轮播图-->
      <Carousel></Carousel>

      <!--<el-button @click="go" > 登录</el-button>-->

      <el-container style="height: 750px;">
        <!--左侧选择栏-->
        <el-aside v-if="goodsTypeSee" style="width: 200px;background-color:#8FC0A9;">
          <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @open="handleOpen2"
                  @close="handleClose2"
                  background-color="#8FC0A9"
                  style="margin-top: 30px;padding-left: 30px"
                  text-color="#fff"
                  active-text-color="#ffd04b">
            <el-menu-item v-for="item in goodsTypes" :key="item.id" @click="typeChange(item.id)">
              <i class="el-icon-ship"></i>
              <span slot="title">{{item.type}}</span>
            </el-menu-item>

          </el-menu>
        </el-aside>

        <!--商品显示区域-->
        <el-main style="background-color:#C8D5B9;">

          <!--商品显示-->
          <div style="display: flex">

            <!--第一列商品-->
            <div style="margin: 0 auto">
              <div style="width: 280px;height: 300px;background-color:#FAF3DD;border-radius: 10px;margin-left: 40px;margin-top: 50px;text-align:center "
                   v-for="item in goodsArr2"
                   :key="item.goodsId"
                   @click="goodsDetailShow(item.goodsId)">
                <img :src=item.goodsImage style="width: 200px;height: 200px;margin-top: 20px;">
                <h3 >{{item.goodsName}}</h3>
              </div>
            </div>

            <!--第二列商品-->
            <div style="margin: 0 auto">
              <div style="width: 280px;height: 300px;background-color:#FAF3DD;border-radius: 10px;margin-top: 50px;text-align:center"
                   v-for="item in goodsArr1"
                   :key="item.goodsId"
                   @click="goodsDetailShow(item.goodsId)">
                <img :src=item.goodsImage style="width: 200px;height: 200px;margin-top: 20px;">
                <h3 >{{item.goodsName}}</h3>
              </div>
            </div>
          </div>



          <!--页码显示-->
          <div style="margin-left: 320px;margin-top: 30px">
            <el-pagination
                    small
                    layout="prev, pager, next"
                    @prev-click="pageSub"
                    @next-click="pageAdd"
                    :total="50">
            </el-pagination>
          </div>

        </el-main>
      </el-container>

      <Footer></Footer>
    </el-container>
  </div>


</template>

<!--///////////////////////////////////////////////js///////////////////////////////////////////////-->
<script>
import Carousel from "../components/Carousel";
import Footer from "../components/Footer";
import Header from "../components/Header";

export default {
  name: 'Home',
  components: {
    Carousel,
    Footer,
    Header,
  },
  created() {
    this.getGoods();
    var goodsCarArr = [];
    localStorage.setItem("goodsCarArr", JSON.stringify(goodsCarArr));
  },
  mounted() {
    this.$http({
      url:'http://localhost:8083/user/getYibanUserid',
      method:"post"
    }).then(res=>{
      console.log(res)
      if (res.data.res){
        localStorage.setItem("YiBanUserId",res.data.YibanUserid);
      }
    }).catch(err=>{
      console.log(err)
    })
  },
  /* ////////////////////////////////////////// 数据/////////////////////////////////////////// */
  data() {
    return {
      logoImage:require("../assets/bgc/logo.png"),
      activeIndex2: '1',
      goodsTypeSee: true,
      userID:"",
      goodsPage: 1,
      goodsTypeCurrent: 11,
      goodsTypes:[
        {id:11,type:"布艺"},
        {id:22,type:"饰品"},
        {id:33,type:"手包"},
        {id:44,type:"泥塑/石艺"},
        /*{id:55,type:"雕塑"},
        {id:66,type:"旧物改造"},*/
      ],
      goods: {
          goodsId:1,
          goodsName: 1,
          goodsImage: null,
      },

      goodsArr1:[
      ],
      goodsArr2:[
      ],

      postArray:[
        {postId:null,postName:null,postImage:null},
      ],

      goodsDetailId:'',


    };
  },
  /* /////////////////////////////////////    方法体    ////////////////////////////////////////*/
  methods: {

    handleOpen2(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose2(key, keyPath) {
      console.log(key, keyPath);
    },


    /////////////////////////导航函数//////////////////////////////////
    /*handleSelect(key, keyPath) {
      console.log(key, keyPath);
      if (key == 1){
        this.$router.push("/");
      }else if (key == 2){
        this.$router.push("/forum");
      }else if (key == 3){
        this.$router.push("/sport");
      }else if(key == 4){
        this.$router.push("/user");
      }else {
        console.log("请点击其他选项")
      }
    },*/
    go(){
      this.$router.push("/login")
    },

    //////////////////////////////商品类型切换函数/////////////////////
    typeChange(typeId){
      this.$data.goodsPage = 1;
      this.$data.goodsTypeCurrent = typeId;
      this.goodsArr1.splice(0,this.goodsArr1.length);
      this.goodsArr2.splice(0,this.goodsArr2.length);
      this.getGoods();
    },

    ///////////////////////////////页码切换函数////////////////////////
    pageSub(){
      if (this.$data.goodsPage > 1){
        this.$data.goodsPage -= 1;
      }
      console.log(this.$data.goodsPage);
      this.goodsArr1.splice(0,this.goodsArr1.length);
      this.goodsArr2.splice(0,this.goodsArr2.length);
      this.getGoods();
    },

    pageAdd(){
      this.$data.goodsPage += 1;
      console.log(this.$data.goodsPage);
      this.goodsArr1.splice(0,this.goodsArr1.length);
      this.goodsArr2.splice(0,this.goodsArr2.length);
      this.getGoods();
    },

    /*////////////////////详情页函数///////////////////*/
    goodsDetailShow(goodId){
      console.log(goodId);
      localStorage.setItem("goodIdCurrent",goodId);
      this.$router.push({
        path:'/goodsDetail'
      });
    },

    ///////////////////////////////////axios网络请求函数///////////////////////////
    getGoods(){
      this.$http({
        method:'POST',
        url:'http://localhost:8083/goods/showByPage',
        params:{
          "page":this.$data.goodsPage,
          "type":this.$data.goodsTypeCurrent,
        },
      }).then( res => {
          console.log(res.data);
          for (let i in res.data){
            this.goods = res.data[i];
            this.goods.goodsImage = require("../assets/goodsImage/"+res.data[i].goodsImage);
            console.log(this.goods.goodsImage);
            if(i % 2 == 0){
              this.goodsArr2.push(this.goods);
            }else {
              this.goodsArr1.push(this.goods);
            }
          }
        console.log(this.goodsArr1);
        console.log(this.goodsArr2);
      }).catch(error => {
          console.log(error);
      })
    },

    /*getOneGoods(key){
      this.$http({
        method:"POST",
        url:'http://localhost:8080/goods/showByOne',
        params:{
          "GoodsId":key
        }
      }).then(res =>{

      }).catch(error =>{

      })
    },*/

  }
}
</script>

<style scoped>
  .but{
    margin-top: 15px;
    margin-left: 15px;
    float: right;
  }
  .but button{
    width: 100px;
    height: 30px;
    border-radius: 5px;
    background-color: transparent;
    border: 0;
  }
  el-menu-item{
    margin-left: 30px;

  }
</style>
